<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            账号<input type="text" v-model ='user.name'></br>
            密码<input type="text" v-model ='user.pass'></br>

            显示<p>{{user.name+"*"+user.pass}}</p>

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                // 实现深度监听
                watch : {
                    // 无法监听
                    // user(){
                    //     console.log('123')
                    // }
                    // 可以监听 太过繁琐 且会响应每个成员的变化
                    // user : {
                    //     handler(n,o){
                    //         console.log('123')
                    //         console.log(n,o)
                    //     },
                    //     deep:true
                    // }
                    // 能够指定监听某一成员 精确定位
                    'user.name'(){
                        setTimeout(()=>{
                            console.log('123')
                        },1000)
                    }
                },
                data: {
                    user : {
                        name : '',
                        pass : '',
                    },
                },
                computed : {
                },
            })
        </script>
    </body>
</html>